<template>
  <div>
      <p style="margin-left:30rpx;padding-top:30rpx;" >{{titlee}}</p>
          <ul style="padding:13px">
            <li class="data-li" v-for="(itemName, idx) of contents" :key="idx" style="display:flex;position: relative;" @click="upkes(contents[idx])">
               <div class="lab" v-show="contents[idx].type=='上课'" >上课</div>
               <div class="lab1" v-show="contents[idx].type=='点评'">点评</div>
               <div class="lab2" v-show="contents[idx].type=='请假'">请假</div>
               <div class="lab3" v-show="contents[idx].type=='补课'">补课</div>
              <div style="flex:1;position: relative;margin:auto;">
                <img
                  :src="contents[idx].img"
                  alt
                  style="width:100rpx;height:100rpx;top: 0;right: 0;bottom: 0;left: 0;margin: auto;"
                />
              </div>
              <div style="flex:3.1;">
                <p style="margin-bottom:5%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;">{{contents[idx].title}}</p>

                <div style="display:flex;" >
                  <p style="flex:1.1;">{{contents[idx].schooltime}}</p>
                  <p style="flex:1;text-align:center;">{{contents[idx].classban}}</p>
                </div>
              </div>
            </li>
          </ul>
  </div>
</template>
<script>
export default {
  data(){
    return {
    }
  },
  computed: {

  },
  props: {
    titlee: String,
    contents: Array,

  },
    mounted() {
  },
  methods: {

    start(){
    },
    upkes(v){
      wx.navigateTo({
        url: `../../pages/Already/main?grade=${v.grade}&key=${v.key}&classban=${v.classban}&data=${v.data.title}&schooltime=${v.schooltime}&start=${new Date(v.start).toLocaleDateString()}&teacher=${v.teacher}&title=${v.title}&type=${v.type}&info=${v.info}&schooluserids=${v.schooluserids}`
      });
    }
    },
  }

</script>
<style>
.data-li {
  border: 1px solid black;
  border-radius: 5px;
  margin: 20rpx;
  padding:40rpx;
}
.label{
font-size:13px;
color:#ffffff;
line-height:38px;
background:red;
position:absolute;
right:0;
z-Index:2;
padding:0 2em;
-webkit-transform-origin:left bottom;
-moz-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:translate(29.29%,-100%) rotate(45deg);
-moz-transform:translate(29.29%,-100%) rotate(45deg);
transform:translate(29.29%,-100%) rotate(45deg);
text-indent:0;
}
.labels{
font-size:13px;
color:#ffffff;
line-height:38px;
background:orange;
position:absolute;
right:0;
z-Index:2;
padding:0 2em;
-webkit-transform-origin:left bottom;
-moz-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:translate(29.29%,-100%) rotate(45deg);
-moz-transform:translate(29.29%,-100%) rotate(45deg);
transform:translate(29.29%,-100%) rotate(45deg);
text-indent:0;
}
.lab{
font-size:23rpx;
color:#ffffff;
line-height:46rpx;
background:green;
position:absolute;
right:0;
z-Index:2;
top:0;
padding:0 2em;
border-radius: 2px;
}
.lab1{
font-size:23rpx;
color:#ffffff;
line-height:46rpx;
background:orange;
position:absolute;
right:0;
z-Index:2;
top:0;
padding:0 2em;
border-radius: 2px;
}
.lab2{
font-size:23rpx;
color:#ffffff;
line-height:46rpx;
background:red;
position:absolute;
right:0;
z-Index:2;
top:0;
padding:0 2em;
border-radius: 2px;
}
.lab3{
font-size:23rpx;
color:#ffffff;
line-height:46rpx;
background:blue;
position:absolute;
right:0;
z-Index:2;
top:0;
padding:0 2em;
border-radius: 2px;
}
</style>
